<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人主页</title>
    <link th:href="@{/webjars/jquery.3.4.1/jquery.js}" rel="stylesheet">
    <link th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.css}" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet">
    <link th:href="@{/font-awesome-4.7.0/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/css/article.css}" rel="stylesheet">
    <link th:href="@{/css/person.css}" rel="stylesheet">
    <link th:href="@{/css/head.css}" rel="stylesheet" >
    <link th:href="@{/css/foot.css}" rel="stylesheet">
    <link href="//cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
    <link th:href="@{/css/bootstraps.css}" rel="stylesheet"/>
</head>

<body>
    <!--引入导航栏-->
    <div th:include="/common/head :: top"></div>

    <!-- 个人简介 -->
    <div style="clear: both;"></div>
    <!--中间的内容-->

    <div id="contentLeft">
        <nav class="category">
            <ul class="introduction">
                <!--th:src="@{${user.userProfilePhoto}}"-->
                <li><span id="person"><img th:src="@{${user.userProfilePhoto}}"
                    class="ui avatar image" /></span></li>
                <li><a>昵称: [[${user.userName}]] </a></li>
                <li><a th:href="@{'/concern/' + ${user.userId}}">关注: [[${concernNumber}]] </a></li>
                <li><a th:href="@{'/fans/' + ${user.userId}}">粉丝: [[${fansNumber}]] </a></li>
                <li><a th:href="@{'/person/' + ${user.userId}}">文章: [[${articleNumber}]] </a></li>
                <li><a th:href="@{'/collect/' + ${user.userId}}">我的收藏: [[${collectNumber}]] </a></li>
                <li><a>个人介绍: [[${user.userIntroduction}]]</a></li>
                <div th:if="${user.userName} != ${session.loginUser.userName}">
                    <input id="userId" type="hidden" name = "userId"
                       th:value="${session.loginUser.userId}" />
                    <input id="userFriendId" type="hidden" name = "userFriendId"
                       th:value="${user.userId}" />

                    <div class="text-center">
                        <button class="btn btn-success" id="addUserConcernBtn"
                                th:if="${b} == false">关注</button>
                    </div>
                    <div class="text-center">
                        <button class="btn btn-success" id="cancelUserConcernBtn"
                                th:if="${b} == true">取消关注</button>
                    </div>
                </div>

                <!--class="btn btn-outline-dark"-->
                <form method="post" th:action="@{'/settings'}">
                    <!--<input type="hidden" id="id" name="id" th:value="${session.loginUser.userId}" />-->
                    <input class="btn btn-success" th:value="修改" th:type="submit"
                           th:if="${user.userName} == ${session.loginUser.userName}">
                </form>
            </ul>
            <hr style="border-bottom: 3px rgb(231, 231, 231) solid;"/>
            <ul class="introduction">
                <li><a>文章分类</a></li>
                <li th:each="list : ${category}">
                    <!--<a th:href="@{'/article/category/'  + ${user.userId} + '/' + ${list.id}}"-->
                    <a th:href="@{'/article/category'(userId=${user.userId},sortId=${list.id})}"
                       th:text="${list.name} + '('+ ${list.number} + '篇' +')' "></a>
                </li>
            </ul>
            <hr style="border-bottom: 3px rgb(231, 231, 231) solid;"/>
            <ul class="introduction">
                <li><a>文章数: [[${articleNumber}]]</a></li>
                <li th:each="list : ${articleList}">
                    <a th:href="@{'/article/detail/' + ${list.articleId}}" th:text="${list.articleTitle}"></a>
                </li>
            </ul>
        </nav>


        <div class="ui top attached teal segment" th:if="${articleNumber} != 0"
             style="width: 66%; float: right; margin-right: 100px;">
            <div class="ui padded vertical segment m-padded-tb-large m-mobile-lr-clear">
                <div class="ui mobile reversed stackable grid" th:each="list : ${pageInfo.list}">
                    <div class="eleven wide column">
                        <a th:href="@{'/article/detail/' + ${list.articleId}}">
                            <h3 style="font-size: 18px" class="ui header" th:text="${list.articleTitle}">这里是标题</h3>
                        </a>
                        <!--th:text="${list.articleSummary}"-->
                        <p class="m-text">[[${list.articleSummary}]]</p>
                        <div class="ui stackable grid">
                            <div class="eleven wide column">
                                <div class="ui mini horizontal link list">
                                    <div class="item">
                                        <!--<img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">-->
                                        <img th:src="@{${list.user.userProfilePhoto}}" alt="" class="ui avatar image">
                                        <div class="content"><a class="header">[[${list.user.userName}]]</a></div>
                                    </div>
                                    <div class="item">
                                        <i class="calendar icon"></i> [[${list.articleDate}]]
                                    </div>
                                    <div class="item">阅读数 [[${list.articleViewCount}]]</div>
                                    <div class="item">
                                        <a href="javascript:;" th:article-id="${list.articleId}"
                                           th:if="${list.userId == session.loginUser.userId}" onclick="update(this)">编辑</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="five wide column">
                        <a th:href="@{'/article/detail/' + ${list.articleId}}">
                            <img th:src="@{${list.articlePicture}}" alt="" class="ui rounded image">
                        </a>
                    </div>
                    <hr style="border-bottom: 1px rgb(231, 231, 231) solid; width: 100%"/>
                </div>

                <br><br>

                <!--<div class="ui middle aligned two column grid" th:if="${articleNumber} > 5">-->
                     <!--<div class="column">-->
                        <!--<a th:href="@{'/person/' +-->
                            <!--${user.userId}(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}"-->
                            <!--class="ui mini teal basic button">上一页</a>-->
                     <!--</div>-->
                     <!--<a th:href="@{pageInfo}"></a>-->
                     <!--<div class="right aligned column">-->
                         <!--<a th:href="@{'/person/' +-->
                            <!--${user.userId}(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}"-->
                            <!--class="ui mini teal basic button">下一页</a>-->
                     <!--</div>-->
                <!--</div>-->

                <div style="text-align: center" th:if="${articleNumber} > 0">
                    <ul class="pagination">
                        <li><a th:href="@{'/person/'+${user.userId}(pageNum=1)}">首页</a></li>
                        <li><a th:href="@{'/person/'+${user.userId}(pageNum=${pageInfo.hasPreviousPage}
                                ?${pageInfo.prePage}:1)}">上一页</a></li>
                        <li><a th:each="i : ${#numbers.sequence(1,pageInfo.pages)}"
                               th:href="@{'/person/'+${user.userId}(pageNum=${i})}">[[${i}]]</a></li>
                        <li><a th:href="@{'/person/'+${user.userId}(pageNum=${pageInfo.hasNextPage}
                                ?${pageInfo.nextPage}:${pageInfo.pages})}">下一页</a></li>
                        <li><a th:href="@{'/person/'+${user.userId}(pageNum=${pageInfo.pages})}">尾页</a></li>
                    </ul>
                </div>

            </div>
        </div>

        <!-- 更新文章 -->
        <!-- MODAL -->
        <div class="modal fade" tabindex="-1" id="updateModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header alert-success">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <!--<span><h4 class="modal-title">更新文章</h4></span>-->
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <label>文章标题:</label>
                                <input class="form-control" id="articleTitles">
                            </div>
                        </div><br>
                        <div class="row">
                            <div class="col-md-12">
                                <label>文章简介：</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <textarea id="articleSummary" class="form-control" rows="3"></textarea>
                            </div>
                        </div><br>
                        <div class="row">
                            <!--class="col-md-8 col-sm-8 col-xs-8"-->
                            <div class="col-md-12">
                                <label>文章分类：</label>
                                <select id="updateCategories"></select>
                            </div>
                        </div><br>
                        <div class="row">
                            <div class="col-md-12">
                                <label>文章内容</label>
                                <textarea id="articleContents" class="form-control" rows="12"></textarea>
                            </div>
                        </div>
                        <!--/. END ROW -->

                    </div>
                    <div class="modal-footer">
                        <button type="button" id="updateBtn" class="btn btn-success" data-dismiss="modal" articleId="">确认更新
                        </button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>

                </div>
            </div>
        </div>
        <!-- /. END MODAL -->

    </div>



    <!--引入底部栏-->
    <div th:include="/common/foot :: foot"></div>
</body>
    <script th:src="@{/js/myJs/prism.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/toastr/toastr.min.js}"></script>
    <script th:src="@{/assets/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/myJs/post.js}"></script>

    <script>
        // 增加用户关注事件
        $('#addUserConcernBtn').click(function() {
            var userId = $('#userId').val();
            var userFriendId = $('#userFriendId').val();
            var json = {userId: userId, userFriendId: userFriendId};
            $.ajax({
                type: "POST",
                dataType: "json",
                contentType: "application/json;charset=utf-8",
                url: "http://localhost:8081/user/concern",
                data: JSON.stringify(json),
                success: function(result) {
                    // 刷新页面
                    toastr.success(result.message);
                    setTimeout(function() {
                        window.location.reload();
                    }, 2000)
                },
                error: function() {
                    location.reload();
                }
            });
        });

        //取消用户关注事件
        $('#cancelUserConcernBtn').click(function () {
            var userId = $('#userId').val();
            var userFriendId = $('#userFriendId').val();

            $.ajax({
                type: "DELETE",
                url: "http://localhost:8081/user/cancelConcern/" + userId + "/" + userFriendId,
                success: function(result) {
                    // 刷新页面
                    toastr.success(result.message);
                    setTimeout(function() {
                        window.location.reload();
                    }, 2000)
                }
            });
        });

        // 更新文章按钮点击事件
        $('#updateBtn').click(function () {
            var articleId = $('#updateBtn').attr("articleId");
            var articleTitle = $('#articleTitles').val();
            var articleSummary = $("#articleSummary").val();
            var categoryId = $("#updateCategories option:selected").attr("categoryId");
            var articleContent = $('#articleContents').val();
            var article = {
                articleId: articleId,
                articleTitle: articleTitle,
                articleSummary: articleSummary,
                sortId: categoryId,
                articleContent: articleContent
            };
            $.ajax({
                type: "PUT",
                url: "http://localhost:8081/article/update",
                dataType: "json",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(article),
                success: function (result) {
                    toastr.success(result.message);
                    setTimeout(function() {
                        window.location.reload();
                    }, 2000)
                },
                error: function () {
                    location.reload();
                }
            });
        });
    </script>

</html>